// 部门管理弹窗表单
// 这个表单和右侧的表单差不多的
<template>
    <a-modal
        :title="title"
        :width="800"
        :ok=false
        :visible="visible"
        :confirmLoading="confirmLoading"
        :okButtonProps="{ props: {disabled: disableSubmit} }"
         @ok="handleOk"
         @cancel="handleCancel"
         cancelText="关闭">
            <a-spin :spinning="confirmLoading">
                 <a-form-model ref="form" :model="model" :rules="validatorRules">
                    <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="机构名称"
                    prop="departName"
                    :hidden="false"
                    hasFeedback >
                    <a-input id="departName" placeholder="请输入机构/部门名称" v-model="model.departName"/>
                    </a-form-model-item>
                    <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :hidden="seen" label="上级部门" hasFeedback>
                        <a-tree-select
                        style="width:100%"
                        :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                        :treeData="departTree"
                        v-model="model.parentId"
                        placeholder="请选择上级部门"
                        :disabled="condition">
                        </a-tree-select>
                    </a-form-model-item>
                    <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="机构类型">
                    <template v-if="seen">
                        <a-radio-group v-model="model.orgCategory" placeholder="请选择机构类型">
                        <a-radio value="1">
                            公司
                        </a-radio>
                        </a-radio-group>
                    </template>
                    <template v-else>
                        <a-radio-group v-model="model.orgCategory" placeholder="请选择机构类型">
                        <a-radio value="2">
                            部门
                        </a-radio>
                        <a-radio value="3">
                            岗位
                        </a-radio>
                        </a-radio-group>
                  </template>
                    </a-form-model-item>
                    <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="mobile"
                    label="电话">
                    <a-input placeholder="请输入电话" v-model="model.mobile"/>
                    </a-form-model-item>
                    <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="传真">
                    <a-input placeholder="请输入传真" v-model="model.fax"/>
                    </a-form-model-item>
                    <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="地址">
                    <a-input placeholder="请输入地址" v-model="model.address"/>
                    </a-form-model-item>
                    <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="排序">
                    <a-input-number v-model="model.departOrder"/>
                    </a-form-model-item>
                    <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="备注">
                    <a-textarea placeholder="请输入备注" v-model="model.memo"/>
                    </a-form-model-item>
                </a-form-model>
            </a-spin>
    </a-modal>
</template>
<script>
export default {
    name: 'DepartForm',
    data() {
        return {
            title: '操作',
            // 弹窗默认不显示
            visible: false,
            // 确定按钮的loading
            confirmLoading: false,
            disableSubmit:false,
             model: {},
              labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
             },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            seen:false,
             validatorRules:{
                departName:[{ required: true, message: '请输入机构/部门名称!' }],
                orgCode:[{ required: true, message: '请输入机构编码!' }],
                mobile: [{validator:this.validateMobile}],
                orgCategory:[{required: true, message: '请输入机构类型!'}]
              },
              departTree:[],
              condition:false
        }
    },
    methods: {
     add (depart) {
        if(depart){
          this.seen = false;
          this.dictDisabled = false;
        }else{
          this.seen = true;
          this.dictDisabled = true;
        }
        this.edit(depart);
      },
      edit (record) {
          this.visible = true;
          this.model = Object.assign({}, this.defaultModel, record)
          this.loadTreeData();
          this.model.parentId = record!=null?record.toString():null;
           if(this.seen){
             this.model.orgCategory = '1';
           }else{
             this.model.orgCategory = '2';
           }
      },
       handleCancel () {
        this.close()
      },
       close () {
        this.$emit('close');
        this.disableSubmit = false;
        this.visible = false;
        this.$refs.form.resetFields();
      },
        handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            // httpAction(this.url.add,this.model,"post").then((res)=>{
            //   if(res.success){
            //     that.$message.success(res.message);
            //     that.loadTreeData();
            //     that.$emit('ok');
            //   }else{
            //     that.$message.warning(res.message);
            //   }
            // }).finally(() => {
            //   that.confirmLoading = false;
            //   that.close();
            // })

          }else{
            return false;
          }
        })
      },
    }
}
</script>